<template>
  <div class="m-content">
    <PmHeader></PmHeader>

    <div class="block">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="id"
          label="id">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码">
        </el-table-column>
        <el-table-column
          prop="id_card"
          label="证件号">
        </el-table-column>
        <el-table-column
          prop="avater"
          label="头像url">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="联系电话">
        </el-table-column>
        <el-table-column
          prop="h_id"
          label="房屋id">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="created"
          label="注册时间">
        </el-table-column>
        <el-table-column
          prop="last_login"
          label="最近登录时间">
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
import PmHeader from '../components/PmHeader.vue';
  export default {
    name:  "Users",
    components: {PmHeader},
    data() {
      return {
        users: {},
        currentPage: 1,
        total: 0,
        pageSize:  5
      }
    },
    methods: {
      page(currentPage) {
        const _this = this
        this.$axios.get('/user/users?currentPage=' + currentPage).then((res) => {
          console.log(res.data.data.records)
          _this.user = res.data.data.records
          _this.currentPage = res.data.data.current
          _this.total = res.data.data.total
          _this.pageSize = res.data.data.size
        })
      }
    },
    mounted () {
      this.page(1);
    }
}
</script>